<!--
 * @Description: 打印
 * 
 * @Author:Edan
 * @Date: 2023-08-24 14:22:31
 * @FilePath: /yuxiuproweb/src/views/material/returnRecord/mods/print.vue
-->
<template>
  <el-drawer
    size="80%"
    :visible.sync="shows"
    direction="ltr"
    :with-header="false"
    class="drawer-view"
  >
    <div id="printContent">
      <div style="text-align: center; font-size: 20px; line-height: 32px">
        有点牛
      </div>
      <div style="text-align: center; font-size: 18px">PMC部门退货表</div>
      <div style="width: 100%; display: flex; justify-content: space-between">
        <span>供应商：{{ list[0].supplier }}</span>
        <span>日期：{{ getTodate() }}</span>
      </div>
      <div>
        <table
          class="mt10 table-top"
          width="100%"
          border="1"
          cellpadding="4"
          cellspacing="0"
          align="center"
          style="
            table-layout: fixed;
            word-break: break-all;
            word-wrap: break-word;
          "
        >
          <tr>
            <td style="width: 50px">序号</td>
            <td>到货单号</td>
            <td>型号</td>
            <td style="width: 60px">门幅</td>
            <td>批号</td>
            <td>米数</td>
            <td style="width: 70px">防水</td>
            <td style="width: 60px">工艺</td>
            <td>备注</td>
          </tr>
          <tr align="center" v-for="(item, index) in list" :key="index">
            <td style="width: 50px">{{ index + 1 }}</td>
            <td>{{ item.arrivalnumber }}</td>
            <td>
              {{ item.frbaicName }}
            </td>
            <td style="width: 60px">
              {{ item.doorwidth }}
            </td>
            <td>
              {{ item.batchNumber }}
            </td>
            <td>{{ item.inventoryQuantity }}</td>
            <td style="width: 70px">
              {{ item.iswaterproof }}
            </td>
            <td style="width: 60px">
              {{ item.status }}
            </td>
            <td>
              {{ item.remark }}
            </td>
          </tr>
        </table>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import printJS from "print-js";
export default {
  props: {
    show: Boolean,
    data: {
      type: Array,
    },
    type: String,
  },
  data() {
    return {
      list: [],
    };
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  mounted() {
    this.initData();
    setTimeout(() => {
      this.printHtml();
    }, 60);
  },
  methods: {
    initData() {
      // this.list = this.getList(this.data, "number", "dealRowSpan");
      this.list = [...this.data];
    },
    getTodate() {
      let now = new Date();
      // 获取年、月、日、时、分、秒
      let year = now.getFullYear(); // 获取完整的年份(4位数字)
      let month = String(now.getMonth() + 1).padStart(2, "0"); // 月份是从0开始的，所以要加1
      let day = String(now.getDate()).padStart(2, "0"); // 获取日
      // 将年月日时分秒组合成字符串
      return `${year}-${month}-${day}`;
    },
    printHtml() {
      const style =
        "@page { margin: 10px } @media print { .header-view { width: 100%; display: flex; align-items: center; justify-content: space-between; } .header-left {width: 60%;} .img-view { display: flex; align-items: center; }.img-view-img { height: 80px; } .img-view-img img { height: 100%; } .img-view-mods { margin-left: 10px; } .header-right { display: flex; align-items: center;} .header-right-img { width: 80px; height: 80px; margin-left: 10px; } .header-right-img img { width: 100%; height: 100%; } .table-top {margin-top: 10px} table, td, th { text-align: center; border: 1.5px solid #000; border-collapse: collapse;} td{font-size:14px}}";
      printJS({
        printable: "printContent",
        type: "html",
        style: style,
        base64: true,
        scanStyles: false,
        onPrintDialogClose: () => {
          this.shows = false;
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.drawer-view {
  ::v-deep {
    .el-descriptions-row th {
      display: none;
    }
    .el-descriptions-row td {
      border: 1.5px solid #000;
      color: #000;
    }
  }
}

.header-view {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .header-left {
    width: 60%;
  }
  .img-view {
    display: flex;
    align-items: center;
    &-img {
      height: 80px;
      img {
        height: 100%;
      }
    }
    &-mods {
      margin-left: 10px;
    }
  }
  .header-right {
    display: flex;
    align-items: center;
    &-img {
      width: 80px;
      height: 80px;
      margin-left: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
table,
td,
th {
  text-align: center;
  border: 1.5px solid #000;
  border-collapse: collapse;
}
</style>
